<template>
<div>
  <el-container style="height: 100vh">
  <el-aside
    class="aside"
    :style="{ width: `${isCollapse ? 65 : 240}px`, transition: '0.4s' }"
  >
    <el-menu
      :default-active="$route.path"
      background-color="#345"
      text-color="#bbb"
      :style="{ height: '100vh' }"
      :collapse="isCollapse"
      class="el-menu-vertical-demo"
      router
    >
      <el-menu-item>
        <img width="30px" src="" alt="" />
        <template slot="title">
          <span style="font-size: 1.2em; color: #efefef; font-weight: bold"
            >&nbsp;&nbsp;宠物志后台管理</span
          >
        </template>
      </el-menu-item>
                <el-menu-item index="/home/index">
            <i class="el-icon-message"></i>
            <template slot="title"> 首页 </template>
          </el-menu-item>
      <el-submenu v-for="item in rights" :key="item.rid" :index="item.rid.toString()" >
        <template slot="title">
          <i class="el-icon-location"></i>
          <span slot="title">{{item.role_name}}</span>
        </template>
        <el-menu-item :index='item.role_path' v-for="item in item.children" :key="item.rid">
          <i class="el-icon-notebook-2"></i>
          <span slot="title">{{item.role_name}}</span>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </el-aside>
   <el-container>

     <el-header class="header">
          <i v-show="!isCollapse" class="el-icon-s-fold" @click="isCollapse=true"></i>
          <i v-show="isCollapse" class="el-icon-s-unfold" @click="isCollapse=false"></i>
          <el-breadcrumb
            style="flex:1; margin-left: 20px;"
            v-if="$route.meta" separator-class="el-icon-arrow-right">
            <el-breadcrumb-item
              v-for="item in $route.meta.crumb"
              :key="item"
              :to="item.split(':')[1]">
              {{item.split(':')[0]}}
            </el-breadcrumb-item>
          </el-breadcrumb>

          <span v-if="!user">未登录</span>
          <span v-else>
            {{user[0].admin_name}} &nbsp;&nbsp;
            权限:{{user[0].admin_level}}级 &nbsp;&nbsp;
            {{user[0].admin_phone}} &nbsp;&nbsp;
          </span>
          &nbsp;&nbsp;
        </el-header>


  <el-main>
          
    <router-view />
  </el-main>
   </el-container>
  </el-container>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
    data() {
    return {
      isCollapse: false
    }
  },
    computed:{
    ...mapState(['user','rights'])
  }
};
</script>

<style>
*{
  margin: 0;
  padding: 0;
}
  .header{
    display: flex;
    align-items: center;
    box-shadow: 1px 1px #aaa, -1em 0 0.4em olive;
  }
</style>
